<template>
<el-container>
  <el-form :model="FirLogForm" :rules="rules" ref="FirLogForm">
  <el-container>
    <el-aside width="200px">
      <!-- <el-upload
        class="avatar-uploader"
        action="https://www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"
        accept="image/jpeg,image/png"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="FirLogForm.imageUrl" :src="FirLogForm.imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload> --> 
      <!-- url实现 -->
      <el-upload 
        class="avatar-uploader"
        action='' 
        accept="image/*"
        :on-change="handleChange" 
        :limit="1" 
        :show-file-list="false"
        :auto-upload="false">
        <img v-if="FirLogForm.imageUrl" :src="FirLogForm.imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span class="notice_text">
        --上传你的头像（jpg/png 小于2M)
      </span>
      <!-- base64 实现 -->

      <!-- <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <el-dialog :visible.sync="dialogVisible" append-to-body>
        <img width="100%" fit="contain" :src="dialogImageUrl" alt="">
      </el-dialog> -->
    </el-aside>
  
    <el-container>
      <el-main style="margin-top:-30px">
        
        <el-row>
          <el-col :span="5">
            <p>昵称:</p>
          </el-col>

          <el-col :span="19">
            <el-form-item prop="name">
              <el-input placeholder="昵称最大长度为20" v-model="FirLogForm.name" size="mini" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row style="margin-top:5px">
          <el-col :span="5">
            <p>生日:</p>
          </el-col>

          <el-col :span="18">
            <el-form-item prop="birdate">
                <el-date-picker
                v-model="FirLogForm.birdate"
                type="date"
                size="mini"
                placeholder="选择生日"
                :editable="false"
                value-format="yyyy-MM-dd" 
                format="yyyy-MM-dd"
                @change="dateChangebirthday">
                </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-top:5px">
          <el-col :span="5">
            <p>性别:</p>
          </el-col>

          <el-col :span="19">
            <el-form-item prop="sex">
              <el-radio-group v-model="FirLogForm.sex">
                <el-radio v-model="FirLogForm.sex" label="1">男</el-radio>
                <el-radio v-model="FirLogForm.sex" label="2">女</el-radio>
                <el-radio v-model="FirLogForm.sex" label="3">未知</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

      </el-main>
      <el-footer>
        <el-row>
          <el-col :offset="18">
            <el-button class="SubBut" type="primary" plain @click="handleBegin">开始</el-button>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </el-container>
  </el-form>
</el-container>
</template>


<style>
@import "../style/welcomefirst.css";
</style>

<script>
import {mapState} from 'vuex'

export default {
  data() {
    return {
      FirLogForm:{
        imageUrl: "",
        name: "",
        sex: "",
        birdate: "",
        uid:"",
        token:""
      },
      rules: {
        name:[
          {required: true,message: '请输入昵称',trigger: 'change'},
          {min:1,max:20,message: '长度为1到20个字符',trigger: 'change'}
        ],
        birdate:[
          {type:'string',required:true,message:'请输入生日',trigger:'change'}
        ],
        sex:[
          {required:true,message:'请选择一个性别',trigger:'change'}
        ]
      }
    };
  },
  methods: {
      dateChangebirthday(val) {
        // console.log(val);
        this.FirLogForm.birdate = val;
      },
      handleAvatarSuccess(res, file) {
        this.$message.success('上传成功')
        this.FirLogForm.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isIMAGE = file.type === 'image/jpeg'||'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isIMAGE) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
          return false
        }

        this.$message('正在上传...')
        return true;
      },
      handleBegin(){
        this.FirLogForm.token = this.usertoken;
        this.FirLogForm.uid = this.useruid;
        // console.log(typeof(this.FirLogForm.birdate))
        // console.log(this.FirLogForm.birdate)
        this.$refs.FirLogForm.validate((valid)=> {
          if(valid){
          this.$store
            .dispatch("Upd", this.FirLogForm)
            .then((response) => {
              let code = response.data.code;
              // console.log(code)
              if (code === 200) {
                this.$router.push({name: "main"}); // 成功后跳转至主页面
                this.$store.commit("Reguid",response.data.data)
                this.$store.commit("Regtoken",response.data.message)
              }
              else {
                this.loginerror("验证错误");
                this.$router.push('/')
                return false;
              }
            })
            .catch(() => {});
          }
          else {
            this.$message.error("请确认表单无误")
            return false
          }
        })
      },
      handleChange(file){
        const isIMAGE = file.raw.type === 'image/jpeg'||'image/png';
        const isLt2M = file.raw.size / 1024 / 1024 < 2;

        if (!isIMAGE) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
          return false
        }

        this.$store.dispatch("Frw2Base64", file.raw).then((Response) =>
        {
          this.FirLogForm.imageUrl=Response
          return true
        })
      }
    },
    computed:{
      ...mapState({
        usertoken: state => state.session.token,
        useruid: state => state.session.uid
      })
    },
    mounted() {
        
    },
};
</script>
